{eval $position_class = isset($_var['_ad_position']) ? $_var['_ad_position'] : 'global';}
{eval $grid_columns = isset($_var['grid_columns']) ? $_var['grid_columns'] : 3;}
{eval $grid_rows = isset($_var['grid_rows']) ? $_var['grid_rows'] : 3;}
{eval $empty_text = isset($_var['empty_text'])? $_var['empty_text'] : '广告位招租中';}
{eval $default_color = isset($_var['default_color'])? $_var['default_color'] : '#FFFFFF';}
{eval $default_bgcolor = isset($_var['default_bgcolor'])? $_var['default_bgcolor'] : '#333333';}
{eval $grid_items = array();}
{eval $grid_items = isset($_var['grid_items'])? $_var['grid_items'] : array();}
{eval echo $position}
<div class="er-grid-{echo $position_class} wp" style="display: grid; grid-template-columns: repeat({echo $grid_columns}, 1fr); grid-template-rows: repeat({echo $grid_rows}, 1fr); gap: 0; border-collapse: collapse;">
    {if !empty($grid_items)}
        {loop $grid_items $item}
            <div class="item" style="background:{echo !empty($item['ad']['bgcolor']) ? $item['ad']['bgcolor'] : $default_bgcolor};padding:8px;text-align: center;border:1px solid #ddd;grid-row:{echo $item['grid_row']};grid-column:{echo $item['grid_col']};margin-right:-1px;margin-bottom:-1px;">
                {if $item['ad']}
                    <a href="{echo $item['ad']['url']}" target="_blank" style="color:{echo !empty($item['ad']['color']) ? $item['ad']['color'] : $default_color};{echo $item['ad']['bold'] ? 'font-weight:bold;' : ''}{echo $item['ad']['underline'] ? 'text-decoration:underline;' : ''}{echo $item['ad']['italic'] ? 'font-style:italic;' : ''}">{echo $item['ad']['title']}</a>
                {else}
                <a href="javascript:;" onclick="showAddAdDialog({echo $item['grid_row']}, {echo $item['grid_col']})" style="color:{echo $default_color};cursor:pointer;">{echo $empty_text}</a>
                {/if}
            </div>
        {/loop}
    {/if}
</div>
<script src="source/plugin/erling_gridad_combo/lib/vue.min.js"></script>
<script>
    // 
    window.showAddAdDialog = function(row, col) {
        // 创建Vue实例容器
        var dialogHtml = '<div id="vueAdDialog" style="padding:15px;width:600px;">' +
            '<form @submit.prevent="submitForm" style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">' +
            
            // 第一列
            '<div style="grid-column:1">' +
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">广告标题</label>' +
            '       <input type="text" v-model="form.title" required style="width:72%;padding:8px;border:1px solid #ddd;border-radius:4px;">' +
            '   </div>' +
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">链接地址</label>' +
            '       <input type="url" v-model="form.url" required style="width:72%;padding:8px;border:1px solid #ddd;border-radius:4px;">' +
            '   </div>' +
            
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">背景颜色</label>' +
            '       <input type="color" v-model="form.bgcolor" style="width:72%;height:40px;">' +
            '   </div>' +
            
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">文字颜色</label>' +
            '       <input type="color" v-model="form.color" style="width:72%;height:40px;">' +
            '   </div>' +
            
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">文字样式</label>' +
            '       <div style="display:flex;gap:15px;">' +
            '           <label><input type="checkbox" v-model="form.bold"> 加粗</label>' +
            '           <label><input type="checkbox" v-model="form.underline"> 下划线</label>' +
            '           <label><input type="checkbox" v-model="form.italic"> 斜体</label>' +
            '       </div>' +
            '   </div>' +
            '</div>' +
            
            // 第二列
            '<div style="grid-column:2">' +
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">广告位置</label>' +
            '       <select v-model="form.position" style="width:72%;padding:8px;border:1px solid #ddd;border-radius:4px;">' +
            '           <option value="1">首页头部</option>' +
            '           <option value="2">首页中部</option>' +
            '           <option value="3">首页底部</option>' +
            '           <option value="4">帖子页右侧</option>' +
            '       </select>' +
            '   </div>' +
            
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">排序</label>' +
            '       <input type="number" v-model="form.sort" min="0" style="width:72%;padding:8px;border:1px solid #ddd;border-radius:4px;" readonly>' +
            '   </div>' +
            
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">过期时间</label>' +
            '       <input type="datetime-local" v-model="form.expire_time" style="width:72%;padding:8px;border:1px solid #ddd;border-radius:4px;">' +
            '   </div>' +
            
            '   <div style="margin-bottom:15px;">' +
            '       <label style="display:block;margin-bottom:5px;font-weight:bold;">租赁积分</label>' +
            '       <input type="number" v-model="form.rent_credit" min="0" style="width:72%;padding:8px;border:1px solid #ddd;border-radius:4px;">' +
            '   </div>' +
            
            '   <div style="font-size:12px;color:#666;margin-top:5px;padding:8px;background:#f9f9f9;border-radius:4px;">' +
            '       <div style="margin-bottom:3px;">示例广告效果：</div>' +
            '       <div id="adPreview" :style="previewStyle">' +
            '         {{ form.title || "广告标题示例" }}' +
            '       </div>' +
            '   </div>' +
            '</div>' +
            
            // 底部按钮
            '<div style="grid-column:1/-1;text-align:right;border-top:1px solid #eee;padding-top:15px;">' +
            '   <button type="button" @click="hideDialog" style="margin-right:10px;padding:8px 15px;background:#f5f5f5;border:1px solid #ddd;border-radius:4px;cursor: pointer;">取消</button>' +
            '   <button type="submit" style="padding:8px 15px;background:#4285f4;color:#fff;border:none;border-radius:4px;cursor: pointer;">提交</button>' +
            '</div>' +
            
            '</form></div>';

        // 显示弹窗
        var dialog = showDialog(dialogHtml, 'info', '广告位申请', null, true);
        
        // 初始化Vue实例
        new Vue({
            el: '#vueAdDialog',
            data: {
                form: {
                    title: '',
                    url: '',
                    bgcolor: '#333333',
                    color: '#FFFFFF',
                    bold: false,
                    underline: false,
                    italic: false,
                    position: {echo $position},
                    sort: (row - 1) * {echo $grid_columns} + col, // 根据行和列计算排序
                    expire_time: '',
                    rent_credit: 0
                }
            },
            computed: {
                previewStyle() {
                    return {
                        padding: '8px',
                        background: this.form.bgcolor,
                        color: this.form.color,
                        'font-weight': this.form.bold ? 'bold' : 'normal',
                        'text-decoration': this.form.underline ? 'underline' : 'none',
                        'font-style': this.form.italic ? 'italic' : 'normal',
                        'border-radius': '3px',
                        'text-align': 'center'
                    };
                }
            },
            methods: {
                submitForm() {
                    alert('广告申请已提交，管理员会尽快处理！');
                    hideMenu();
                    var dialog = document.getElementById('fwin_dialog');
                    var cover = document.getElementById('fwin_dialog_cover');
                    if (dialog && dialog.parentNode) {
                        dialog.parentNode.remove();
                    }
                    if (cover) {
                        cover.remove();
                    }
                },
                hideDialog() {
                    alert('取消广告申请');
                    hideWindow('dialog');
                    var dialog = document.getElementById('fwin_dialog');
                    var cover = document.getElementById('fwin_dialog_cover');
                    if (dialog && dialog.parentNode) {
                        dialog.parentNode.remove();
                    }
                    if (cover) {
                        cover.remove();
                    }
                }
            }
        });
    }
</script>